<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "@/axios";
const dialogFormVisible = ref(false)
const form = reactive({
  cellPath:'',
  oltPath:'',
  oltCellMapPath:'',
  wavePath:'',
  temperaturePath:'',
  disconnectionPath:'',
  repeatAlarmPath:'',
  manyTimesAlarmPath:'',
  avgAlarmTimePath:'',
  netUserPath:'',
  abnormalLightReceptionPath:'',
  pppoeUserPath:'',
  fttrUserPath:'',
  overLimitPath:'',
  opticalPathDegradationPath:'',
  cellTypePath:'',
  batch:''
})
const tableData =ref()
onMounted(()=>{
  axios.get('/anh/file/getFileList?fileType=小区健康度&size=10&page=1').then(res=>{
    tableData.value=res.data.data.records
  })
})

function  newTask() {
  dialogFormVisible.value=true
}
function unzip(r){
  axios.get(
      '/anh/file/downloadbypath?path='+r.filePath,
      {
        responseType: 'blob' // 设置响应类型为 blob，以便获取文件流
      }
  ).then((response) => {
    const blob = new Blob([response.data], {type: response.headers['content-type']});

    // 获取后端设置的文件名
    const contentDisposition = response.headers['content-disposition'];
// 先提取出文件名部分（这里假设格式是固定的，从 `filename=` 之后开始提取）
    const encodedFileName = contentDisposition.split('filename=')[1];
// 对提取出的编码后的文件名进行解码
    const decodedFileName = decodeURIComponent(encodedFileName);

    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = decodedFileName;

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }).catch((error) => {
    console.error(error);
  });
}
function getPath(type){
  axios.get('/anh/file/getFileList?fileType='+type+'&size=10&page=1').then(res=>{
    options.value=res.data.data.records
  })
}
function submit() {
  const formData = new FormData();
  for (const key in form) {
    formData.append(key, form[key]);
  }
  axios.post('/anh/analyse/healthStatusCommunity',formData).catch(e=>{
    console.log(e)
  })
  dialogFormVisible.value=false
}
const options = ref([
  {
    batch: 'Option1',
    filePath: 'Option1',
  }
])
function fill(){
  axios.get('/anh/analyse/getPathsByBatch?batch='+form.batch).then(res=>{
    console.log(res)
    for (const key in form) {
      if(key==='batch')continue;
      form[key]=res.data.data[key]
    }
  })
}
</script>

<template>
  <el-button type="success" @click="newTask">新建任务</el-button>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="fileName" label="文件名" width="180" />
    <el-table-column prop="batch" label="批次" width="180" />
    <el-table-column prop="time" label="上传时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="unzip(scope.row)">导出</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="50%">
    <el-form :model="form">
      <el-form-item label="批次" :label-width="100">
        <el-input v-model="form.batch"  @blur="fill" ></el-input>
      </el-form-item>
      <el-form-item label="小区底表" :label-width="100">
        <el-select v-model="form.cellPath" placeholder="Please select a zone" @click="getPath('小区底表')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>

          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="olt信息" :label-width="100">
        <el-select v-model="form.oltPath" placeholder="Please select a zone" @click="getPath('olt信息')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>

          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分公司匹配" :label-width="100">
        <el-select v-model="form.oltCellMapPath" placeholder="Please select a zone" @click="getPath('小区对应olt')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>

          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="板卡高温" :label-width="100" >
        <el-select v-model="form.temperaturePath" placeholder="Please select a zone" @click="getPath('板卡高温')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="波动率" :label-width="100" >
        <el-select v-model="form.wavePath" placeholder="Please select a zone" @click="getPath('波动率')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="网管用户数" :label-width="100" >
        <el-select v-model="form.netUserPath" placeholder="Please select a zone" @click="getPath('网管用户数')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="弱光用户数" :label-width="100" >
        <el-select v-model="form.abnormalLightReceptionPath" placeholder="Please select a zone" @click="getPath('弱光用户数')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="pppoe用户数" :label-width="100" >
        <el-select v-model="form.pppoeUserPath" placeholder="Please select a zone" @click="getPath('pppoe用户数')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="fttr用户数" :label-width="100" >
        <el-select v-model="form.fttrUserPath" placeholder="Please select a zone" @click="getPath('fttr用户数')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="超限率" :label-width="100" >
        <el-select v-model="form.overLimitPath" placeholder="Please select a zone" @click="getPath('超限率')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="劣化率" :label-width="100" >
        <el-select v-model="form.opticalPathDegradationPath" placeholder="Please select a zone" @click="getPath('劣化率')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="小区标识" :label-width="100" >
        <el-select v-model="form.cellTypePath" placeholder="Please select a zone" @click="getPath('小区标识')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="重复告警" :label-width="100" >
        <el-select v-model="form.repeatAlarmPath" placeholder="Please select a zone" @click="getPath('重复告警')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="多次告警" :label-width="100" >
        <el-select v-model="form.manyTimesAlarmPath" placeholder="Please select a zone" @click="getPath('多次告警')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="radius掉线统计" :label-width="100" >
        <el-select v-model="form.disconnectionPath" placeholder="Please select a zone" @click="getPath('radius掉线统计')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户中断平均时长" :label-width="100" >
        <el-select v-model="form.avgAlarmTimePath" placeholder="Please select a zone" @click="getPath('用户中断平均时长')">
          <el-option
              v-for="item in options"
              :key="item.filePath"
              :label="item.filePath"
              :value="item.filePath"
          >
            <span style="float: left">{{ item.batch }}</span>
            <span style="float: right;">{{ item.filePath }}</span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>